<!--
All rights Reserved, Designed By www.youyacao.com
@Description:产品更新列表
@author:成都市一颗优雅草科技有限公司
@version V4.2
注意：本前端源码遵循 MIT开源协议本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584
开源gitee地址：https://gitee.com/youyacao/songshu-video-page
 -->



<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 统计信息
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-row>
        <el-card class=" user_card  grid-content">
          <div class="echars_user" id="main4"></div>
        </el-card>
      </el-row>
      <el-row>
        <el-card class=" user_card  grid-content">
          <div class="echars_user" id="main"></div>
        </el-card>
      </el-row>
      <el-row>
        <el-card class=" user_card  grid-content">
          <div class="echars_user " id="main2"></div>
        </el-card>
      </el-row>
      <el-row>
        <el-card class=" user_card  grid-content">
          <div class="echars_user " id="main3"></div>
        </el-card>
      </el-row>


    </div>
    <!-- 添加弹出框 -->
  </div>
</template>

<script>
  export default {
    name: "page",
    mounted() {
      // 在通过mounted调用即可
      this.echartsInit()
    },
    created() {
      setInterval(() => {
        this.echartsInit()
      }, 10000)
    },
    methods: {
      //初始化echarts
      echartsInit() {
        //柱形图
        //因为初始化echarts 的时候，需要指定的容器 id='main'
        this.$api.stat.info().then(res => {
          this.$echarts.init(document.getElementById('main')).setOption({
            title: [{
              text: '用户注册信息统计'
            }],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: ['月注册', '日注册']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
                name: '昨日',
                type: 'bar',
                barWidth: '10%',
                data: [res.data.user.lastMonth, res.data.user.yesterday],
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: '{c}', //显示百分号
                  textStyle: { //数值样式
                    color: 'black', //字体颜色
                    fontSize: 10 //字体大小
                  }
                }
              },
              {
                name: '今日',
                type: 'bar',
                barWidth: '10%',
                data: [res.data.user.monthcount, res.data.user.todaycount],
                label: {
                  show: true, //开启显示
                  position: 'top', //在上方显示
                  formatter: '{c}', //显示百分号
                  textStyle: { //数值样式
                    color: 'black', //字体颜色
                    fontSize: 10 //字体大小
                  }
                }
              }
            ]
          })
          this.$echarts.init(document.getElementById('main2')).setOption({
            title: [{
              text: '视频信息统计'
            }],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: [ '月新增', '日新增']
            },
            yAxis: {
              type: 'value'
            },
         series: [{
             name: '昨日',
             type: 'bar',
             barWidth: '10%',
             data: [res.data.video.lastMonth, res.data.video.yesterday],
             label: {
               show: true, //开启显示
               position: 'top', //在上方显示
               formatter: '{c}', //显示百分号
               textStyle: { //数值样式
                 color: 'black', //字体颜色
                 fontSize: 10 //字体大小
               }
             }
           },
           {
             name: '今日',
             type: 'bar',
             barWidth: '10%',
             data: [res.data.video.monthcount, res.data.video.todaycount],
             label: {
               show: true, //开启显示
               position: 'top', //在上方显示
               formatter: '{c}', //显示百分号
               textStyle: { //数值样式
                 color: 'black', //字体颜色
                 fontSize: 10 //字体大小
               }
             }
           }
         ]
          })
          this.$echarts.init(document.getElementById('main3')).setOption({
            title: [{
              text: '图文信息统计'
            }],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: [ '月新增', '日新增']
            },
            yAxis: {
              type: 'value'
            },
           series: [{
               name: '昨日',
               type: 'bar',
               barWidth: '10%',
               data: [res.data.text_image.lastMonth, res.data.text_image.yesterday],
               label: {
                 show: true, //开启显示
                 position: 'top', //在上方显示
                 formatter: '{c}', //显示百分号
                 textStyle: { //数值样式
                   color: 'black', //字体颜色
                   fontSize: 10 //字体大小
                 }
               }
             },
             {
               name: '今日',
               type: 'bar',
               barWidth: '10%',
               data: [res.data.text_image.monthcount, res.data.text_image.todaycount],
               label: {
                 show: true, //开启显示
                 position: 'top', //在上方显示
                 formatter: '{c}', //显示百分号
                 textStyle: { //数值样式
                   color: 'black', //字体颜色
                   fontSize: 10 //字体大小
                 }
               }
             }
           ]
          })
          this.$echarts.init(document.getElementById('main4')).setOption({
            title: [{
              text: '总计信息'
            }],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            xAxis: {
              type: 'category',
              data: ['总用户数量', '总视频数量', '总图文数量']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [res.data.user.zcount, res.data.video.zcount, res.data.text_image.zcount],
              type: 'bar',
              showBackground: true,
              barWidth: '20%',
              backgroundStyle: {
                color: 'rgba(180, 180, 180, 0.2)',
              },
              label: {
                show: true, //开启显示
                position: 'top', //在上方显示
                formatter: '{c}', //显示百分号
                textStyle: { //数值样式
                  color: 'black', //字体颜色
                  fontSize: 10 //字体大小
                }
              }
            }]
          })
        })
      }

    }
  }
</script>


<style scoped>
  .user_card {
    width: auto;
    height: 300px;
  }

  .echars_user {
    width: 80%;
    height: 200px;
  }
</style>
